<template>
  <div class="local_box">
    <div class="inner_box">
      <div class="top_box">
        <div class="left">
          <span>本地音乐</span>
          <span>共{{ getLocalMusic.length }}首</span>
        </div>
        <div class="select_directory">
          <span @click="showDirectory">选择目录</span>
        </div>
      </div>
      <div class="center_box">
        <div class="center_left">
          <div class="play-wrap">
            <div>
              <span class="iconfont icon-triangle-down"></span>
              <span class="text">播放全部</span>
            </div>
            <span class="el-icon-plus"></span>
          </div>
          <div class="match-wrap">
            <span class="iconfont icon-suolian-bangding-lianjie"></span>
            <span>匹配音乐</span>
          </div>
        </div>
        <div class="center_right">
          <el-input
            placeholder="请输入内容"
            v-model="keyword"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
      <div class="list_box">
        <table cellspacing="0" class="el-table playlit-table" stripe>
          <thead>
            <th class="sort"></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th class="time">时长</th>
          </thead>
          <tbody>
            <tr
              class="el-table__row"
              v-for="(item, index) in getLocalMusic"
              :key="index"
              @click="playmusic(item)"
            >
              <td
                class="td_sort"
                style="width:50px;textAlign:center"
                v-html="item.index + 1 < 10 ? '0' + item.index : item.index"
              ></td>
              <td>
                <div class="song-wrap">
                  <div class="name-wrap">
                    <!-- 名称 -->
                    <span> {{ item.name }}</span>
                  </div>
                </div>
              </td>
              <td>未知</td>
              <td class="td_time" style="width:80px;textAlign:center">
                -- ：--
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      mount: 0,
      keyword: "",
    }
  },
  created() {
    this.$electron.ipcRenderer.on("addMusic", (event, musicList) => {
      this.$store.dispatch("addLocalMusic", musicList)
    })
  },
  computed: {
    ...mapGetters(["getLocalMusic"]),
  },
  methods: {
    showDirectory() {
      this.$EventBus.$emit("showDirectory")
    },
    // 点击播放歌曲
    async playmusic(item) {
      this.$store.dispatch("getSong", {
        file: item,
        type: "local",
        autoplay: true,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../../../static/scss/common.scss";
@import "./localMusic.scss";
</style>
